// vue.config.js
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const isProduction = process.env.NODE_ENV === 'production'
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const cdn = {
    css: [],
    js: [
        'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
        'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
        'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
    ]
}

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
    // 使用运行时编译器的 Vue 构建版本
    runtimeCompiler: true,

    // 开启生产环境SourceMap，设为false打包时不生成.map文件
    productionSourceMap: false,

    // 关闭ESLint，如果你需要使用ESLint，把lintOnSave设为true即可
    lintOnSave: true,

    devServer: {
        open: true,        // 是否自动打开浏览器页面
        host: '0.0.0.0',    // 指定使用一个 host，默认是 localhost
        port: 8080,         // 端口地址
        https: false,       // 使用https提供服务
        // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
        proxy: 'http://10.65.209.20:9033/chain-service-frontend/console/v2'
    },

    chainWebpack: (config) => {
        if (isProduction) {
            // 生产环境注入cdn
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
        // vue-cli 3.0默认设置symlinks(false),导致无法启用热更新
        config.resolve.symlinks(true)
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('components', resolve('src/components'))
    },

    configureWebpack: config => {
        if (isProduction) {
            // 用cdn方式引入
            config.externals = {
                'vue': 'Vue',
                'vuex': 'Vuex',
                'vue-router': 'VueRouter',
                'axios': 'axios'
            }

            // 为生产环境修改配置...
            config.plugins.push(
                //生产环境自动删除console
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            drop_debugger: true,
                            drop_console: true,
                        },
                    },
                    sourceMap: false,
                    parallel: true,
                })
            )

            return {
                plugins: [
                    new BundleAnalyzerPlugin()
                ]
            }
        }
    },
    
    css: {
        // 生产打包使用css分离插件 ExtractTextPlugin，开发环境关闭，否则影响css热更新
        extract: isProduction ? true : false,
        sourceMap: false,
        loaderOptions: {
            sass: {
                data: `
                @import "@/style/mixin.scss";
                @import "@/style/_var.scss";
                `
            },
            postcss: {
                plugins: [
                    require("postcss-px-to-viewport")({
                      viewportWidth: 1920, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
                      unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
                      viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw
                      selectorBlackList: [".font-14", ".font-16", ".font-18", ".font-20", ".font-30", ".font-60"], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
                      minPixelValue: 10, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
                      mediaQuery: false // 允许在媒体查询中转换`px`
                    })
                ]
            }
        },
        modules: false
    }
}
